<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-31 11:32:29
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-31 15:33:58
 * @FilePath: /consult-patient-vue3-ts/src/views/Consult/ConsultDep.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { getAllDep } from '@/services/consult'
import type { TopDep } from '@/types/consult'
import { onMounted, ref, computed } from 'vue'
import { useConsultStore } from '@/stores'
import type { ConsultIllness, Image } from '@/types/consult'
const fileList = ref<Image[]>([])
const store = useConsultStore()

const active = ref(0)
// 一级科室
const allDep = ref<TopDep[]>([])
onMounted(async () => {
    const res = await getAllDep()
    allDep.value = res.data
})
// 二级科室，注意：组件初始化没有数据 child 可能拿不到
const subDep = computed(() => allDep.value[active.value]?.child)

</script>

<template>
    <div class="consult-dep-page">
        <cp-nav-bar title="选择科室" />
        <div class="wrapper">
            <van-sidebar v-model="active">
                <van-sidebar-item :title="top.name" v-for="top in allDep" :key="top.id" />
            </van-sidebar>
            <div class="sub-dep">
                <router-link to="/consult/illness" v-for="sub in subDep" :key="sub.id" @click="store.setDep(sub.id)">
                    {{ sub.name }}
                </router-link>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.van-sidebar {
    width: 114px;

    &-item {
        padding: 14px;
        color: var(--cp-tag);

        &--select {
            color: var(--cp-main);
            font-weight: normal;

            &::before {
                display: none;
            }
        }
    }
}

.consult-dep-page {
    padding-top: 46px;

    .wrapper {
        height: calc(100vh - 46px);
        overflow: hidden;
        display: flex;

        .sub-dep {
            flex: 1;
            height: 100%;
            overflow-y: auto;

            >a {
                display: block;
                padding: 14px 30px;
                color: var(--cp-dark);
            }
        }
    }
}
</style>